<template>
    <div class="menuList pl20 pr20">
        <avue-crud
            ref="crud"
            v-model="dialogForm"
            :data="data"
            :defaults.sync="defaults"
            :option="option"
            :search.sync="searchForm"
            :table-loading="loading"
            @on-load="onLoad"
            @search-change="handleSearchChange"
            @row-save="handleRowSave"
            @row-update="handleRowUpdate"
            @row-del="handleRowDel"
        >
            <!-- 列自定义 -->
            <template slot="type" slot-scope="scope">
                <el-tag v-if="scope.row.type" type="success">菜单</el-tag>
                <el-tag v-else type="danger">按钮</el-tag>
            </template>

            <template slot="menu" slot-scope="{ row }">
                <el-button icon="el-icon-view" size="mini" type="text" @click="handelView(row)">查看</el-button>
                <el-button icon="el-icon-edit" size="mini" type="text" @click="handelEdit(row)">编辑</el-button>
                <el-button icon="el-icon-circle-plus-outline" size="small" type="text" @click.stop="handleAdd(row)">新增子项
                </el-button>
            </template>
        </avue-crud>
    </div>
</template>

<script>
import noPage from '@/mixins/noPage'
import iconList from "./icon"
import {dic} from "@/config";

export default {
    name: 'menuList',
    mixins: [noPage],
    data() {
        return {
            urls: {
                0: 'menu',
                1: 'findAllTree'
            },
            searchForm: {},
            dialogForm: {
                type: true,
                currentId: null,
            },
            defaults: {},
            data: [],
            option: {
                ...window.avueCrud,
                index: false,
                editBtn: false,
                addBtn: true,
                delBtn: true,
                menuWidth: 300,
                align: 'left',
                rowKey: 'id',
                rowParentKey: 'parentId',
                column: [
                    {
                        label: 'ID',
                        prop: 'id',
                        width: 120,
                        display: false
                    },
                    {
                        label: '菜单名称',
                        prop: 'menuName',
                        search: true,
                        width: 200,
                        rules: [
                            {
                                required: true,
                                message: '请输入菜单名称',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '菜单编号',
                        prop: 'menuKey',
                        search: true,
                        width: 150,
                        rules: [
                            {
                                required: true,
                                message: '请输入菜单编号',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '路由地址',
                        prop: 'path',
                        width: 150
                    },
                    {
                        label: '上级菜单',
                        prop: 'parentId',
                        hide: true,
                        type: 'input',
                        placeholder: '请输入上级菜单ID',
                        addDisabled: true,
                    },
                    {
                        label: '菜单图标',
                        prop: 'menuIcon',
                        type: "icon",
                        iconList,
                        html: true,
                        width: 90,
                        formatter: (row, val) => {
                            if (val) {
                                if (val.indexOf("#") === 0) {
                                    return `<svg aria-hidden="true" class="avue-input-icon__icon-symbol"><use xlink:href="#${val.slice(1)}"></use></svg>`
                                }
                            }
                            return `<i class="${val}" style="font-size: 24px"></i>`
                        }
                    },
                    {
                        label: '菜单类型',
                        prop: 'menuType',
                        type: 'radio',
                        value: 1,
                        ...dic,
                        dicQuery: {
                            code: 'menuType',
                        },
                        rules: [
                            {
                                required: true,
                                message: '请选择菜单类型',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '组件路径',
                        prop: 'componentPath',
                        search: true,
                        rules: [
                            {
                                message: '请输入菜单别名',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '菜单排序',
                        prop: 'sort',
                        type: 'number'
                    }
                ],
            },
            rowData: {}
        }
    },
    methods: {
        handleAdd(row) {
            this.rowData = row
            this.defaults.parentId.placeholder = row.menuName
            this.dialogForm.currentId = row.id
            this.$refs.crud.rowAdd()
        },
        handelEdit(row) {
            this.rowData = row
            this.$refs.crud.rowEdit(row)
        },
        handelView(row) {
            this.defaults.parentId.type = 'input'
            this.$refs.crud.rowView(row)
        },
        expandNode(node) {
            this.$refs.crud.toggleExpansion(node, true)
        },
        async handleRowSave(form, done, disabled) {
            let params = JSON.parse(JSON.stringify(form))
            params.menuIcon = params.menuIcon ? params.menuIcon : '/'
            if (this.dialogForm.currentId) {
                params.parentId = this.dialogForm.currentId
            }
            delete params.currentId
            try {
                const {code, msg} = await this.$api.menu.create(params)
                if (code === 200) {
                    this.$message.success('添加成功！' || msg)
                    done()
                    this.getData(this.searchForm)
                    this.expandNode(this.rowData)
                }
            } catch (e) {
                disabled()
            }
        },
        async handleRowUpdate(row, index, done, disabled) {
            let params = JSON.parse(JSON.stringify(row))
            params.menuIcon = params.menuIcon ? params.menuIcon : '/'
            this.$refs.crud.validate(async (valid) => {
                if (valid) {
                    try {
                        let {code, msg} = await this.$api.menu.update({
                            id: params.id,
                            ...params
                        })
                        if (code === 200) {
                            this.$message.success('修改成功！' || msg)
                            done()
                            this.getData(this.searchForm)
                            this.expandNode(row)
                        }
                    } catch (e) {
                        disabled()
                    }
                }
            })
        },
        async handleRowDel(row, index, done) {
            let params = {
                id: row.id,
            }
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let {code, msg} = await this.$api.menu.remove(params.id)
                    if (code === 200) {
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            type: 'success',
                            duration: 2000,
                        })
                        done(row)
                    }
                })
        }
    }
}
</script>
<style lang="scss">
.el-dialog__body {
    padding-left: 10px;

    .avue-input-icon__item {
        width: 10% !important;
        height: 70px !important;
        cursor: pointer;
        transition: 0.1s all;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &:hover {
            background-color: #def0f0;
            transform: scale(1) !important;
        }
    }
}

.avue-dialog .el-dialog__header {
    min-height: 60px !important;
}
</style>
